<template>
  <!-- 左边标签导航栏 -->
  <div class="flex items-center bg-white fixed top-[64px] h-[44px] px-2 right-0 z-50 transition-all duration-300 shadow" :style="{left: menuStore.menuWidth}">
      <el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-remove="removeTab" @tab-change="changeTab" style="min-width: 10px">
          <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path" :closable="item.path != '/admin/index'">
              
          </el-tab-pane>
      </el-tabs>

       <!-- 右侧下拉菜单 -->
       <span class="ml-auto flex justify-center items-center h-[32px] w-[32px]">
            <el-dropdown @command="handleCloseTab">
                <span class="el-dropdown-link">
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
  </div>
  <div class="h-[44px]"></div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { useMenuStore } from '@/stores/menu'
import { setTabList, getTabList } from '@/composables/cookie'
const menuStore = useMenuStore()
const route = useRoute()
const router = useRouter()
// 当前被选中的tab
const activeTab = ref(route.path)
// watch(activeTab,(newValue, oldValue) => {
//   router.push(newValue)
//   console.log(newValue);
// })

// 处理关闭标签的下拉菜单事件
const handleCloseTab = (command) => {
  // 首页仪表盘路由
  let indexPath = '/admin/index'
  // 处理关闭其他
  if (command == 'closeOthers') {
    // filter过滤 只留下当前高亮标签和首页仪表盘
    tabList.value = tabList.value.filter(item => item.path == activeTab.value || item.path == indexPath)
  } else if (command == 'closeAll') {
    // 关闭全部 只保留仪表盘首页
    // 仪表盘首页高亮
    activeTab.value = indexPath
    // 只保留仪表盘
    tabList.value = tabList.value.filter(item => item.path == indexPath)
    // 切换标签页
    changeTab(activeTab.value)
  }
  // 最后设置到 cookie 中
  setTabList(tabList.value)
}

// 点击标签切换路由
const changeTab = (path) => {
  // 设置被激活的 Tab 标签
  activeTab.value = path
  // 路由跳转
  router.push(path)
}

const tabList = ref([
    {
        title: '仪表盘',
        path: "/admin/index"
    }
])

// 删除 Tab 标签
const removeTab = (path) => {
  let tabs = tabList.value
  // 当前被选中的 tab 标签
  let actTab = activeTab.value

  // 如果要删除的是当前被选中的标签页，则需要判断其被删除后，需要激活哪个 tab 标签页
  if (actTab == path) {
      // 循环 tabList
      tabs.forEach((tab, index) => {
          // 获取被选中的 tab 元素
          if (tab.path == path) {
              // 拿到被选中的标签页下标，如果它后面还有标签页，则取下一个标签页，否则取上一个
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                  actTab = nextTab.path
              }
          }
      })
  }

  // 需要被激活的标签页
  activeTab.value = actTab

  // 过滤掉被删除的标签页, 重新设置回去
  tabList.value = tabList.value.filter((tab) => tab.path != path)

  // 存储到 cookie 中
  setTabList(tabList.value)

  // 切换标签页
  changeTab(activeTab.value)
}

// 添加 Tab 标签
function addTab(tab) {
  // 标签是否存在
  let isTabNotExisted = tabList.value.findIndex(item => item.path == tab.path) == -1
  // 如果不存在
  if (isTabNotExisted) {
    // 添加标签
    tabList.value.push(tab)
  }
  // 存储 tabList 到 Cookie 中
  setTabList(tabList.value)
}

// 从cookie中初始化导航栏数据
function initTabList() {
  const tabs = getTabList()
  if (tabs) {
    tabList.value = tabs
  }
}
initTabList()

// 在路由切换前被调用
onBeforeRouteUpdate((to, from) => {
  // 设置被激活的 Tab 标签
  activeTab.value = to.path
  // 添加 Tab 标签页
  addTab({
    title: to.meta.title,
    path: to.path
  })
})

</script>
<style>
.el-tabs__item {
    font-size: 12px;
    border: 1px solid #d8dce5!important;
    border-radius: 3px!important;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
    margin-left: 0.1rem!important;
    margin-right: 0.1rem!important;
}

.el-tabs__item.is-active {
    background-color: var(--el-color-primary)!important;
    color: #fff;
}

.el-tabs__item.is-active::before {
    content: "";
    background-color: #fff;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    margin-right: 4px;
}

.el-tabs {
    height: 32px;
}

.el-tabs__header {
    margin-bottom: 0;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 0;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
    height: 32px;
    line-height: 32px;
    border: 0;
    background: #fff;
}

.el-tabs--card>.el-tabs__header {
    border: 0;
}

.el-tabs__nav-prev, .el-tabs__nav-next {
    line-height: 35px;
}

.is-disabled {
    cursor: not-allowed;
    color: #d1d5db;
}

</style>
